let vm = new Vue({
    el: '.todoapp',
    data: {
        newTodo: '',
        allTodos: [],
        activeTodos: [],
        completedTodos: [],
        showTodos: []
    },
    // computed: {
    //     showTodos: function () {
    //         return this.allTodos
    //     }
    // },
    methods: {
        addTodo: function () {
            // 输入验证
            if (!this.newTodo.trim()) {
                alert("小伙子，你什么都没写！");
                this.newTodo = '';
            } else {
                let new_todo = {
                    id: Date.now(),
                    title: this.newTodo,
                    checked: false
                }
                this.allTodos.push(new_todo);
                this.activeTodos.push(new_todo);
                this.newTodo = '';
                this.show(this.allTodos);
            }
        },
        check: function (id) {
            vm.completedTodos = [];
            vm.activeTodos = [];
            this.allTodos.map((todo) => {
                if (todo.id == id) {
                    todo.checked = !todo.checked;
                    return 0;
                }
                if (todo.checked) {
                    vm.completedTodos.push(todo);
                } else {
                    vm.activeTodos.push(todo);
                }
            })
        },
        destroyTodo: function (id) {
            this.allTodos.forEach(function (todo, index, arr) {
                if (todo.id == id) {
                    arr.splice(index, 1);
                    return;
                }
            })
        },
        show: function (arr) {
            this.showTodos = arr;
        }
    }
})